import React, { Component } from 'react'
import {Redirect, Route, Switch} from 'react-router-dom'
import { Layout } from 'antd'
import {connect} from 'react-redux'

import LeftNav from '../../components/left-nav'
import Header from '../../components/header'
import Home from '../home/home'
import Category from '../category/category'
import Product from '../product/product'
import Role from '../role/role'
import User from '../user/user'
import Bar from '../charts/bar'
import Line from '../charts/line'
import Pie from '../charts/pie'


const { Footer, Sider, Content } = Layout
/*
    管理的路由组件
*/
class Admin extends Component {

    render() {
        // query传值接收方式 const {username,password} = this.props.location.query
        // state传值接收方式
        // const {username,password} = this.props.location.state
        // if (username === null || password === null) {
        //     <Redirect to="/login" />
        // }
        // if (this.props.location.state === undefined) {
        //     // 用组件的方式进行页面重定向 return <Redirect to="/login" />
        //     // 用函数的方式重定向
        //     this.props.history.replace('/login');
        // }

        // 读取内存中保存的用户数据
        const user = this.props.user
        // 如果内存中没有user
        if (!user || !user.id) {
            this.props.history.replace('/login')
        }
        
        return (
            <Layout style={{minHeight: '100%'}}>
                <Sider>
                    <LeftNav/>
                </Sider>
                <Layout>
                    <Header>Header</Header>
                    <Content style={{margin: 20, backgroundColor: '#fff'}}>
                        <Switch>
                            <Route path='/home' component={Home}/>
                            <Route path='/category' component={Category}/>
                            <Route path='/product' component={Product}/>
                            <Route path='/role' component={Role}/>
                            <Route path='/user' component={User}/>
                            <Route path='/charts/bar' component={Bar}/>
                            <Route path='/charts/line' component={Line}/>
                            <Route path='/charts/pie' component={Pie}/>
                            <Redirect to="/home"/>
                        </Switch>
                    </Content>
                    <Footer style={{textAlign: 'center', color: '#cccccc'}}>友情提示：使用谷歌或火狐浏览器体验更佳</Footer>
                </Layout>
            </Layout>
        )
    }
}

export default connect(
    state => ({user: state.user}),
    {}
)(Admin)
